<template>
  <div class="userBox">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>
        <span @click="goBack" class="goTitle">机房巡检</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px">
      <el-row>
        <el-col :span="2">
          <span class="title">机房信息：</span>
        </el-col>
        <el-col :span="8">
          <el-form-item label="机房温度：">
            <el-input-number v-model="ruleForm.cds" controls-position="right" :min="0" :max="100" size="medium"></el-input-number>
            <span>℃</span>
          </el-form-item>
          <el-form-item label="空调状态：" class="form-item-bottom">
            <el-radio-group v-model="ruleForm.sfkqrl">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="新风状态：" class="form-item-bottom">
            <el-radio-group v-model="ruleForm.sfkqrl">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="UPS输入电压：">
            <el-input-number v-model="ruleForm.cds" controls-position="right" :min="0" :max="100" size="medium"></el-input-number>
            <span>V</span>
          </el-form-item>
          <el-form-item label="UPS输出电压：">
            <el-input-number v-model="ruleForm.cds" controls-position="right" :min="0" :max="100" size="medium"></el-input-number>
            <span>V</span>
          </el-form-item>
          <el-form-item label="UPS负载率：">
            <el-input-number v-model="ruleForm.cds" controls-position="right" :min="0" :max="100" size="medium"></el-input-number>
            <span>%</span>
          </el-form-item>
          <el-form-item label="UPS温度：">
            <el-input-number v-model="ruleForm.cds" controls-position="right" :min="0" :max="100" size="medium"></el-input-number>
            <span>℃</span>
          </el-form-item>
          <el-form-item label="服务器灯检：" class="form-item-bottom">
            <el-radio-group v-model="ruleForm.sfkqrl">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">故障</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="存储灯检：" class="form-item-bottom">
            <el-radio-group v-model="ruleForm.sfkqrl">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">故障</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="3">
          <el-form-item label="巡检部门：">
            <el-select v-model="ruleForm.dldj" clearable placeholder="请选择" class="inputSelect">
              <el-option v-for="item in daoluOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="巡检人 ：" prop="cflx_MC">
            <el-select v-model="ruleForm.cflx_MC" clearable placeholder="请选择" class="inputSelect">
              <el-option v-for="item in chufalxOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="巡检时间 ：">
            <el-date-picker value-format="yyyy-MM-dd" v-model="ruleForm.ysrq" :picker-options="pickerBeginDateBefore" type="date" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="巡检单图片：">
            <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="lalal" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
            <span class="el-upload__tip">只能上传jpg/png文件，且不超过2M</span>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="fooer_btn">
        <el-button size="medium" @click="goBack">取消</el-button>
        <el-button type="primary" :loading="goliebiao" size="medium" @click="baoCun(title, 'ruleForm')" v-preventReClick>保存</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getUrl, setUrl } from '@/utils/getUrl.js'
import { ziC } from '@/utils/allUrl.js'
export default {
  data: function () {
    return {
      ruleForm: {
        dzjcmc: '',
        dldj: '',
        cflx_MC: '',
        ysrq: '',
        cds: 0,
      },
      rules: {},
      daoluOptions: [],
      chufalxOptions: [],
      title: '', // 标题
      //  图片上传
      imgUrl: [],
      dialogVisible: false,
      dialogImageUrl: '', // 预览
      goliebiao: false, // 防重复点击
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
    }
  },
  created: function () {
    const { title, content } = this.$route.params
    this.title = title
    if (content) {
      this.ruleForm = content
    }
  },
  methods: {
    // 删除图片
    handleRemove(a) {
      const index = this.imgUrl.findIndex((item) => item.id === a.uid)
      this.imgUrl.splice(index, 1)
    },
    // 添加图片
    async lalal(el) {
      const file = el.raw
      const fd = new FormData()
      fd.append('imgFile', file) // 传文件
      const { data: res } = await this.$http.post('img/upload', fd)
      this.imgUrl = res.data.list
      // var reader = new FileReader()
      // reader.readAsDataURL(url)
      // reader.onload = e => {
      //   url = e.target.result.substring(e.target.result.indexOf(',') + 1)
      //   const arr = {
      //     id: el.uid,
      //     htsmj: 'data:image/png;base64,' + url
      //   }
      //   this.imgUrl.push(arr)
      // }
    },
    // 预览
    handlePictureCardPreview(e) {
      this.dialogImageUrl = e.url
      this.dialogVisible = true
    },
    baoCun(title, ruleForm) {
      this.goliebiao = true
      const a = setTimeout(() => {
        this.goliebiao = false
      }, 5000)
      const user = JSON.parse(getUrl('userconter'))
      const { dzjcmc, dzjcrwbm, glbh1, glbh2, xqbm, xqbm2, xxdz, gpszb, dldj, cflx_MC, xxcxs, dxcxs, fxs, cds, sfkqrl, sfkqecsb, jtjrfwq, id } = this.ruleForm
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (title === '添加电子警察') {
            const params = new URLSearchParams()
            params.append('user_id', user.id)
            params.append('JGID', user.zzjg_ID)
            params.append('DZJCMC', dzjcmc)
            params.append('DZJCRWBM', dzjcrwbm)
            params.append('GLBH1', glbh1)
            params.append('GLBH2', glbh2)
            params.append('XQBM', xqbm2 || 0)
            params.append('XXDZ', xxdz)
            params.append('GPSZB', gpszb)
            params.append('DLDJ', dldj)
            params.append('CFLX_ID', cflx_MC)
            params.append('XXCXS', xxcxs || 0)
            params.append('DXCXS', dxcxs || 0)
            params.append('FXS', fxs)
            params.append('CDS', cds)
            params.append('SFKQRL', sfkqrl)
            params.append('SFKQECSB', sfkqecsb)
            params.append('JTJRFWQ', jtjrfwq)
            params.append('JGT', this.imgUrl)
            if (xqbm.length === 3) {
              params.append('SFBM', xqbm[0])
              params.append('CSBM', xqbm[1])
              params.append('XQBM', xqbm[2])
            } else if (xqbm.length === 4) {
              params.append('SFBM', xqbm[0])
              params.append('CSBM', xqbm[1])
              params.append('XQBM', xqbm[2])
              params.append('JDBM', xqbm[3])
            }
            const { data: res } = await this.$http.post(`${ziC}dzjc/insertDianZiJingCha`, params)
            if (res.code === '0014') {
              return ''
            } else if (res.code !== '0000') {
              clearTimeout(a)
              this.goliebiao = false
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.goBack()
          } else {
            const params2 = new URLSearchParams()
            this.chufalxOptions.forEach((item) => {
              if (item.label === cflx_MC || item.value === cflx_MC) {
                this.cflx_MC = item.value
              }
            })
            if (typeof xqbm !== 'number') {
              if (xqbm.length === 3) {
                params2.append('SFBM', xqbm[0])
                params2.append('CSBM', xqbm[1])
                params2.append('XQBM', xqbm[2])
              } else if (xqbm.length === 4) {
                params2.append('SFBM', xqbm[0])
                params2.append('CSBM', xqbm[1])
                params2.append('XQBM', xqbm[2])
                params2.append('JDBM', xqbm[3])
              }
            } else {
              const s = (xqbm + '').substr(0, 2) + '0000'
              const c = (xqbm + '').substr(0, 4) + '00'
              const x = (xqbm + '').substr(0, 6)
              params2.append('SFBM', s)
              params2.append('CSBM', c)
              params2.append('XQBM', x)
              if ((xqbm + '').length > 6) {
                params2.append('JDBM', xqbm)
              }
            }
            params2.append('ID', id)
            params2.append('user_id', user.id)
            params2.append('JGID', user.zzjg_ID)
            params2.append('DZJCMC', dzjcmc)
            params2.append('DZJCRWBM', dzjcrwbm)
            params2.append('GLBH1', glbh1)
            params2.append('GLBH2', glbh2)
            params2.append('XQBM', xqbm2 || 0)
            params2.append('XXDZ', xxdz)
            params2.append('GPSZB', gpszb)
            params2.append('DLDJ', dldj)
            params2.append('CFLX_ID', this.cflx_MC)
            params2.append('XXCXS', xxcxs || 0)
            params2.append('DXCXS', dxcxs || 0)
            params2.append('FXS', fxs)
            params2.append('CDS', cds)
            params2.append('SFKQRL', sfkqrl)
            params2.append('SFKQECSB', sfkqecsb)
            params2.append('JTJRFWQ', jtjrfwq)
            params2.append('JGT', this.imgUrl)
            const { data: res } = await this.$http.post(`${ziC}dzjc/updateDianZiJingCha`, params2)
            if (res.code === '0014') {
              return ''
            } else if (res.code !== '0000') {
              clearTimeout(a)
              this.goliebiao = false
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.goBack()
          }
        } else {
          this.goliebiao = false
          this.$message({
            type: 'error',
            message: '请填写正确的信息',
            center: true,
          })
          return false
        }
      })
    },
    goBack: function () {
      setUrl('Inspection', 'machineInspection')
      this.$router.push('/machineInspection')
    },
  },
}
</script>
<style lang="scss" scoped>
.userBox {
  .goTitle {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
  }
  .el-breadcrumb {
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    .el-breadcrumb-item {
      font-size: 10px;
    }
  }
  .el-row {
    padding: 15px 25px 0 25px;
    border-bottom: 1px solid #f2f2f2;
    .title {
      display: block;
      height: 38px;
      line-height: 38px;
      color: rgba(89, 89, 89, 1);
      font-size: 15px;
      font-weight: 600;
    }
    .el-form-item {
      .inputSelect {
        width: 260px;
      }
      .jinDuTitle {
        height: 18px;
        line-height: 22px;
        color: #c0c4cc;
      }
      .iconBtn {
        margin-left: 10px;
        font-size: 15px;
        color: rgba(187, 187, 187, 1);
        cursor: pointer;
      }
      .DuFen {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .btnGs {
          margin: 0 10px;
        }
      }
      .el-upload__tip {
        font-size: 12px;
        color: #a1a3a8;
        margin-top: 7px;
        padding-left: 10px;
      }
      .xunze {
        margin-top: 18px;
        display: flex;
        > span {
          color: #333;
          width: 80px;
          margin-right: 10px;
        }
      }
    }
    .form-item-bottom {
      margin-bottom: 10px;
    }
  }
  .fooer_btn {
    margin: 10px 0;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
